<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>笔记详情</title>
</head>
<jsp:include page="header.jsp"></jsp:include>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
<style>
    code{ color:#1abc9c; }
    html{ background:#eee; }
    pre{white-space:pre-wrap;}
    p{
        font-size: 18px;
        line-height: 2;
        text-align: justify;
        text-indent:50px;
    }
    i.serif{ text-transform:lowercase; color:#1abc9c; }
    :-moz-any(h1, h2, h3, h4, h5, h5) i.serif{ text-transform: capitalize; }
    i.serif:hover{ color:inherit; }
    @media only screen and (max-width: 640px) {
        table{ word-break:break-all;word-wrap:break-word;font-size:12px; }
        .typo table th, .typo table td, .typo-table th, .typo-table td .typo table caption {
            padding: 0.5em;
        }
        #fork{ display:none; }
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="blog-header col-sm-8 col-sm-offset-2">
            <h1 class="blog-title">${notemk.noteTitle}</h1>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-8 col-sm-offset-2 blog-main">

            <div class="blog-post">
                <blockquote class="blockquote-reverse"><p class="text-right" style="font-size: 14px">${notemk.noteBrief}</p></blockquote>
                <a href="/enterOtherHome?userId=${notemk.userId}" class="small">作者:${notemk.userName}</a>&nbsp;&nbsp;&nbsp;<span class="blog-post-meta small">日期:<f:formatDate value="${notemk.noteDate}" pattern="yyyy年MM月dd日"/></span>
                <HR>
                ${notemk.noteText}
            </div><!-- /.blog-post -->
            <nav>
                <div class="row">
                    <button type="button" class="btn btn-info"><a href="${pageContext.request.contextPath}/index.jsp" style="color: #ffffff">返回首页</a></button>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" id="commentBtn" onclick="getComment(1)" style="margin-left: 300px">评论</button>
                </div>
            </nav>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">评论</h4>
                        </div>

                        <div class="modal-body" id="commentSpace">
                            <form>
                                <%--<div class="form-group">
                                    <label for="message-text" class="control-label">评论</label>
                                </div>--%>

                                <div class="form-group" v-for="comment in comments">
                                    <div class="row" >
                                        <div class="col-md-10 col-md-offset-0" style="height: 80px">
                                            <h5>{{comment.userName}}：<small class="col-md-offset-1" >{{comment.createTime}}</small></h5>
                                            <small>{{comment.content}}</small>
                                        </div>
                                        <div class="col-md-10 col-md-offset-0">
                                            <%--<c:if test="'${userInfo.userId=='+comment.userid+'}'">
                                                <div>啊哈</div>
                                            </c:if>--%>
                                            <a :href="'javascript:deleteComment('+comment.commentId+')'" v-if="(comment.userId == userId)">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="quotes" style="margin-top:5%">
                                <small>
                                    <a href="javascript:getComment(1)">首页</a>
                                    <a href="javascript:getComment(parseInt($('#currentPageNum').text())-1)">上一页</a>
                                    <span class="current"><span id="currentPageNum"></span>/<span id="pageCount"></span></span>
                                    <a href="javascript:getComment(parseInt($('#currentPageNum').text())+1)">下一页</a>
                                    <a href="javascript:getComment(parseInt($('#pageCount').text()))">尾页</a>
                                </small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <form>
                                <div class="form-group">
                                    <label for="message-text" class="control-label"></label>
                                    <textarea class="form-control" id="message-text" ></textarea>
                                </div>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" id="sendComment">发送评论</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.blog-main -->
    </div><!-- /.row -->
</div><!-- /.container -->
<div id="userIdDiv" hidden="hidden">${userInfo.userId}</div>
<input type="hidden" value="${notemk.noteId}" id="hiddenId">
</body>
<jsp:include page="footer.jsp"></jsp:include>
<script>

    function deleteComment(commentId) {
        if (confirm("确定删除？")){
            $.get("${pageContext.request.contextPath}/comment/deleteComment","commentId="+commentId+"&noteId="+$("#hiddenId").val(),function (result) {
                if (result=="nullVar"){
                    cocoMessage.info("评论拉取出错！",1000);
                }else if (result=="false"){
                    cocoMessage.info("评论删除失败！",1000);
                }
                if (result=="true"){
                    getComment($('#currentPageNum').text());
                    cocoMessage.info("评论删除成功！",1000);
                }
            })
        }
    }

    var commentList = new Vue({
        el:"#commentSpace",
        data:{
            comments:0,
            userId:$("#userIdDiv").text(),
        },
    })

    function getComment(pageNum){
        $.get("${pageContext.request.contextPath}/comment/getCommentByNoteIdByPage", "commentNoteId="+$('#hiddenId').val()+"&pageNum="+pageNum, function (result) {
            commentList.comments = result.list;
            $("#pageCount").text(result.pages);
            $("#currentPageNum").text(result.pageNum);
        })
    }

    $(function () {
        $("#sendComment").click(function () {

            $.post("${pageContext.request.contextPath}/comment/addComment","content="+$("#message-text").val()+"&noteId="+$('#hiddenId').val(),function (result) {
                if (result=="nullVar"){
                    cocoMessage.info("请输入评论！",1000);
                    return;
                }else if (result=="logOff"){
                    cocoMessage.info("请先登录！",1000);
                    return;
                }else if (result=="lengthOver"){
                    cocoMessage.info("评论长度过长！",1000);
                }else if (result=="false"){
                    cocoMessage.info("评论失败！",1000);
                    return;
                }
                if (result=="true"){
                    getComment($('#currentPageNum').text());
                    $("#message-text").val('');
                    cocoMessage.info("评论成功！",1000);
                }
            })
        })
    })
</script>
</html>
